<template>
  <!-- <div class="top-set flex-align-center">
      <span>自动分配网点</span>
      <el-switch v-model="value" size="small" />
    </div> -->
  <div class="header flex-justify-between" v-show="value">
    <div class="btns">
      <HPlainButton @click="addRule">新建分配规则</HPlainButton>
    </div>
    <div class="search flex-align-center">
      <el-input
        v-model="name"
        placeholder="名称搜索"
        class="input-with mr5"
        clearable
        @keyup.enter="getList"
         @clear="getList"
      />
      <HButton type="primary" @click="getList">
        <el-icon>
          <Search />
        </el-icon>
        搜索
      </HButton>
    </div>
  </div>
  <div class="table-list" v-show="value">
    <el-table
      border
      stripe
      resizable
      :data="tableData"
      @selection-change="handleChange"
      ref="tableDom"
      height="100%"
      style="position: absolute"
    >
      <el-table-column show-overflow-tooltip type="selection" width="40" fixed="left" />
      <el-table-column
        show-overflow-tooltip
        type="index"
        :index="indexMethod"
        label="序号"
        width="50"
      />
      <el-table-column show-overflow-tooltip prop="name" label="规则名称" min-width="200" />
      <el-table-column show-overflow-tooltip prop="status" label="状态" width="70">
        <template #default="scope">
          <HStatus v-if="!scope.row.status">启用</HStatus>
          <HStatus v-if="scope.row.status" type="info">禁用</HStatus>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="moduleName" label="模块名称" width="250" />
      <el-table-column show-overflow-tooltip prop="condition" label="规则条件" width="150" />
      <el-table-column show-overflow-tooltip prop="type" label="分配方式" width="80">
        <template #default="scope">
          <span v-if="scope.row.type == 1">平均分配</span>
          <span v-if="scope.row.type == 2">随机分配</span>
          <span v-if="scope.row.type == 3">熟客优先</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="empType" label="人员类型" width="80">
        <template #default="scope">
          <span v-if="scope.row.empType == 1">客服</span>
          <span v-if="scope.row.empType == 2">客服组</span>
        </template>
      </el-table-column>
      <el-table-column show-overflow-tooltip prop="emp" label="分配人员" width="250" />
      <el-table-column show-overflow-tooltip prop="weight" label="优先级" width="70" />
      <el-table-column show-overflow-tooltip prop="createTime" label="创建时间" width="150" />
      <el-table-column show-overflow-tooltip prop="updateTime" label="更新时间" width="150" />
      <el-table-column label="操作" width="60" fixed="right">
        <template #default="scope">
          <HLink>详细</HLink>
        </template>
      </el-table-column>
    </el-table>
  </div>
  <div class="footer flex-justify-end" v-show="value">
    <Pagination
      ref="pagination"
      :list_total="total"
      @size-change="getList"
      @current-change="getList"
    />
  </div>

  <!-- 添加/编辑  规则弹窗 -->
  <HModal v-model="addDialog" width="500">
    <template #header>
      <div class="my-header">
        <h3 class="title">{{ dialogTitle }}</h3>
      </div>
    </template>
    <div v-loading="dialogLoading">
      <div class="rule-dialog">
        <div class="form-text">
          <el-form
            label-width="80"
            ref="formRef"
            :rules="rules"
            :model="form"
            @validate="handleFormValidate"
          >
            <el-form-item label="规则名称" :style="getFormItemStyle['name']" prop="name">
              <el-input v-model="form.name" clearable placeholder="请输入名称" />
            </el-form-item>
            <el-form-item label="应用范围" prop="module">
              <el-select
                v-model="form.module"
                class="item-select"
                placeholder="请选择应用范围"
                multiple
                collapse-tags
                collapse-tags-tooltip
                filterable
                clearable
                remote
                reserve-keyword
                remote-show-suffix
              >
              </el-select>
            </el-form-item>
            <div style="display: flex; margin: 12px 0">
              <p style="width: 85px; opacity: 0">占位</p>
              <p>需满足以下所有条件，自动分配规则才会生效</p>
            </div>
            <div class="cards">
              <div v-for="(item, i) in condition" :key="i" class="card">
                <div class="icons">
                  <el-icon size="16" color="#007cff" @click="addCondition">
                    <CirclePlus />
                  </el-icon>
                  <el-icon color="#f56c6c" size="16" @click="deleteCondition(i)">
                    <RemoveFilled />
                  </el-icon>
                </div>
                <el-form-item :label="`条件${i + 1}`" class="item-cond" label-width="60">
                  <div class="item">
                    <el-form-item label="规则条件">
                      <el-select v-model="item.cond" class="width-select mb10" filterable clearable>
                      </el-select>
                    </el-form-item>
                    <el-form-item label="规则内容">
                      <el-select v-model="item.value" class="width-select" filterable clearable>
                      </el-select>
                    </el-form-item>
                  </div>
                </el-form-item>
              </div>
            </div>
            <div class="tips flex-align-center">满足以上条件，则执行以下分配策略</div>
            <el-form-item label="分配方式" style="margin-bottom: 12px">
              <el-select
                v-model="form.way"
                class="item-select"
                placeholder="请选择分配方式"
                filterable
                clearable
              >
              </el-select>
            </el-form-item>
            <el-form-item label="分配人员" style="margin-bottom: 12px">
              <el-select
                v-model="form.emp"
                class="item-select"
                placeholder="请选择分配人员"
                filterable
                clearable
              >
              </el-select>
            </el-form-item>
            <el-form-item label="优先级" style="margin-bottom: 12px">
              <el-input v-model="form.weight" clearable placeholder="不填写则系统默认排序" />
            </el-form-item>
            <el-form-item label="规则状态" class="form_radio_item">
              <el-radio-group v-model="form.status" class="el-group">
                <el-radio :value="false">
                  <span class="bg_text">启用</span>
                </el-radio>
                <el-radio :value="true">
                  <span class="bg_text">禁用</span>
                </el-radio>
              </el-radio-group>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>

    <template #footerLeft>
      <HPlainBgButton is-modal type="error" v-show="dialogTitle === '编辑规则'"
        >删除</HPlainBgButton
      >
    </template>

    <template #footerRight>
      <HButton is-modal type="primary" @click="saveData(formRef)">保存</HButton>
      <HButton is-modal @click="addDialog = false"> 取消 </HButton>
    </template>
  </HModal>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import { ref, reactive } from 'vue'
  import { Search, RemoveFilled, CirclePlus } from '@element-plus/icons-vue'
  import { ElMessage } from 'element-plus'
  import type { FormInstance } from 'element-plus'
  import HPlainButton from '@/components/common/button/HPlainButton.vue'
  import HButton from '@/components/common/button/HButton.vue'
  import HStatus from '@/components/common/status/HStatus.vue'
  import HLink from '@/components/common/link/HLink.vue'
  import HPlainBgButton from '@/components/common/button/HPlainBgButton.vue'
  import HModal from '@/components/common/Modal/HModal.vue'
  import useFormValidateService from '@/service/common/useFormValidate/useFormValidateService'

  /**
   * 使用表单验证服务
   */
  const { handleFormValidate, getFormItemStyle, resetFormValidateResult } = useFormValidateService([
    { name: 'name', isSelect: false },
    { name: 'type', isSelect: false },
  ])

  /**
   * 弹窗关闭事件
   */
  const onClose = () => {
    addDialog.value = false
    resetFormValidateResult()
  }

  const value = ref(true)
  const name = ref('') // 名称
  const tableData = ref([]) // 列表数据
  const tableDom = ref() // 列表dom
  const pagination = ref() // 分页dom
  const total = ref(0) // 总数目

  const addDialog = ref(false)
  const dialogTitle = ref('')
  const dialogLoading = ref(false)
  const formRef = ref<FormInstance>() // 表单元素

  // 表单数据
  const form = reactive({
    id: null,
    module: [],
    name: '',
    way: '',
    emp: '',
    status: false,
    weight: '',
  })

  const condition = ref([
    {
      cond: '',
      value: '',
    },
  ])

  // 验证规则
  const rules = reactive({
    name: [{ required: true, message: '请输入规则名称', trigger: 'blur' }],
  })

  // 列表序号
  const indexMethod = (index: number) => {
    return index + 1
  }

  // 添加条件
  const addCondition = () => {
    if (condition.value.length == 4) {
      ElMessage({
        message: '最多添加4个条件！',
        type: 'warning',
        duration: 2000,
      })
      return
    }
    condition.value.push({
      cond: '',
      value: '',
    })
  }

  // 删除条件
  const deleteCondition = (i) => {
    if (condition.value.length == 1) {
      ElMessage({
        message: '至于保留1个条件！',
        type: 'warning',
        duration: 2000,
      })
      return
    }
    condition.value.splice(i, 1)
  }

  // 获取表格选中的数据
  const selecttion = ref([])
  const handleChange = (val: any[]) => {
    if (val.length != 0) {
      val.forEach((item: { id: any }) => {
        if (Object.values(selecttion.value).indexOf(item.id) == -1) {
          selecttion.value.push(item.id)
        } else {
          selecttion.value = selecttion.value.filter((i) => i == item.id)
        }
      })
    } else {
      selecttion.value = []
    }
  }

  // 获取列表数据
  const getList = () => {}

  // 添加规则
  const addRule = () => {
    dialogTitle.value = '添加规则'
    addDialog.value = true
    form.id = null
    form.name = ''
    form.status = false
  }

  // 保存方法
  const saveDataMethod = (method, data) => {
    dialogLoading.value = true
    method(data).then((res) => {
      if (res.data.success == true) {
        ElMessage({
          message: res.data.message,
          type: 'success',
          duration: 2000,
        })
        addDialog.value = false
        dialogLoading.value = false
        getList()
      } else {
        ElMessage({
          message: res.data.message,
          type: 'warning',
          duration: 2000,
        })
        dialogLoading.value = false
        return
      }
    })
  }

  // 保存数据
  const saveData = (formEl: FormInstance | undefined) => {
    formEl.validate((valid) => {
      if (valid) {
      }
    })
  }
</script>

<style scoped lang="scss">
  @import '../../index.scss';
</style>
